<template>
  <el-container class="dashboard-container">
    <el-header height="140px">
      <el-row class="demo-avatar demo-basic">
        <el-col :span="12">
          <div class="userInfo">
            <div class="block">
              <img style="width:80px" src="@/assets/logo.jpg" alt="" />
            </div>
            <div class="userName">
              <div class="welcome">{{timeStatus}}，管理员</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <div class="page_title"><i class="el-icon-s-platform"  style="margin-right:6px"></i>日活数据</div>
      <el-row :gutter="18" class="overview_wrap">
          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">用户统计</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="UserRadio" size="mini" @input="changeUserStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <v-lineChart  :infoObj="visit" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">智能垃圾站</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="largeRadio" size="mini" @input="changeAdviceStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <v-lineChart  :infoObj="large" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">社区活动</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="actRadio" size="mini"  @input="changeActStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="orderTitle">累计活动：{{activityTotal}}次</div>
                </div>
                <v-stacking  :infoObj="actData" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">积分中心</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="scoreRadio" size="mini" @input="changeScoreStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <v-stacking  :infoObj="scoreDate" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">社群达人</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="talentRadio" size="mini"  @input="changeTalentStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <v-stacking  :infoObj="talentDate" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">随手拍</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="phoneRadio" size="mini" @input="changePhoneStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="orderTitle">累计数据：{{total1}}件</div>
                </div>
                <v-lineChart  :infoObj="phoneDate" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">报事报修</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="repairRadio" size="mini" @input="changeRepairStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="orderTitle">累计数据：{{total2}}件</div>
                </div>
                <v-lineChart  :infoObj="repairDate" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">投诉建议</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="adviceRadio" size="mini" @input="changeAdviceStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="orderTitle">累计数据：{{total3}}件</div>
                </div>
                <v-lineChart  :infoObj="adviceDate" />
              </div>
            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card shadow="hover">
              <div class="orderInfos">
                <div class="orderInfo">
                  <div class="orderTitle">日活跃量</div>
                  <div class="orderStatus">
                    <el-radio-group v-model="dayCountRadio" size="mini" @input="changeDayCountStatus">
                      <el-radio-button  label="1">近7天</el-radio-button>
                      <el-radio-button  label="2">近30天</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="orderTitle">周均跃量：{{weeklyAve}}次</div>
                </div>
                <v-lineChart  :infoObj="dayCountDate" />
              </div>
            </el-card>
          </el-col>


      </el-row>

      <div class="page_title"><i class="el-icon-s-grid"  style="margin-right:6px;margin-top:20px"></i>高频应用</div>
      <el-row class="overview_wrap">
        <el-col :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('repair')"
            @mouseleave="leave('repair')"
            @click="$router.push({ path: '/property-serve/report-repair' })"
          >
            <div class="overview_desc">
              <div ref="repair" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-leijiyunhangshichang plate_icon" />
                <div class="plate_title">
                  <p>报事报修</p>
                  <p class="desc">Report for repair</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.time"
                :key="sName"
                class="list_item"
              >
                <label>{{ sName }}</label>
                <div>
                  <b class="num">{{ sVal.value }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('venue')"
            @mouseleave="leave('venue')"
            @click="$router.push({ path: '/neighbor-health/community-venue/info' })"
          >
            <div class="overview_desc">
              <div ref="venue" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-cunchukongjian plate_icon" />
                <div class="plate_title">
                  <p>场馆预约</p>
                  <p class="desc">Venue reservation</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.gym"
                :key="sName"
                class="list_item"
              >
                <span>{{ sName }}</span>
                <div>
                  <b class="num">{{ sVal.value  }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('integral')"
            @mouseleave="leave('integral')"
            @click="$router.push({ path: '/neighbor-health/association/activity' })"
          >
            <div class="overview_desc">
              <div ref="integral" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-leijiyunhangshichang plate_icon" />
                <div class="plate_title">
                  <p>积分中心</p>
                  <p class="desc">Integral center</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.time"
                :key="sName"
                class="list_item"
              >
                <label>{{ sName }}</label>
                <div>
                  <b class="num">{{ sVal.value }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('information')"
            @mouseleave="leave('information')"
            @click="$router.push({ path: '/neighbor-interaction/info/news' })"
          >
            <div class="overview_desc">
              <div ref="information" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-yunhangzhongshili plate_icon" />
                <div class="plate_title">
                  <p>邻里信息</p>
                  <p class="desc">Neighborhood information</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.neighbour"
                :key="sName"
                class="list_item"
              >
                <label>{{ sName }}</label>
                <div>
                  <b class="num">{{ sVal.value }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('events')"
            @mouseleave="leave('events')"
            @click="$router.push({ path: '/neighbor-health/community-activity/activity' })"
          >
            <div class="overview_desc">
              <div ref="events" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-duiliezhongshili plate_icon" />
                <div class="plate_title">
                  <p>社区活动</p>
                  <p class="desc">Community Events</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.community"
                :key="sName"
                class="list_item"
              >
                <label>{{ sName }}</label>
                <div>
                  <b class="num">{{ sVal.value }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('activism')"
            @mouseleave="leave('activism')"
            @click="$router.push({ path: '/neighbor-health/association/activity' })"
          >
            <div class="overview_desc">
              <div ref="activism" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-cunchukongjian plate_icon" />
                <div class="plate_title">
                  <p>社群活动</p>
                  <p class="desc">Community activism</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.association"
                :key="sName"
                class="list_item"
              >
                <span>{{ sName }}</span>
                <div>
                  <b class="num">{{ sVal.value }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col  :span="6">
          <div
            class="overview_item"
            @mouseenter="enter('wish')"
            @mouseleave="leave('wish')"
            @click="$router.push({ path: '/neighbor-health/association/activity' })"
          >
            <div class="overview_desc">
              <div ref="wish" class="cartoon" />
              <div class="plate_wrap">
                <i class="cloud-quanjugailan-leijiyunhangshichang plate_icon" />
                <div class="plate_title">
                  <p>微心愿</p>
                  <p class="desc">Micro wish</p>
                </div>
              </div>
            </div>
            <div class="overview_list">
              <div
                v-for="(sVal, sName) of overview.claim"
                :key="sName"
                class="list_item"
              >
                <label>{{ sName }}</label>
                <div>
                  <b class="num">{{ sVal.value }}</b>{{ sVal.unit }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

    </el-main>

  </el-container>
</template>

<script>
import API from '@/api';
import PieChart from "@/components/echart/PieChart.vue";
import lineChart from "@/components/echart/lineEchart";
import stackingchart from "@/components/echart/stackingchart";
import { mapGetters } from "vuex";
import lottie from 'lottie-web'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
export default {
  name: 'Dashboard',
  components: {
    "v-pieChart": PieChart,
    'v-lineChart':lineChart,
    'v-stacking':stackingchart
  },
  data() {
    return {
      timeStatus:'早上好',
      UserRadio: '1',  //用户统计
      actRadio:"1",  // 社区活动
      scoreRadio:"1",//积分数据
      talentRadio:"1",//达人数据
      phoneRadio:"1", //工单数据
      repairRadio:"1", //保修
      adviceRadio:"1",//投诉建议
      dayCountRadio:'1',//日活
      largeRadio:'1',

      total1:0,
      total2:0,
      total3:0,
      activityTotal:0,
      weeklyAve:0,//活跃量


      animation: {
        repair: {
          anm: null,
          animationData: require('../../assets/animation/累计运行.json')
        },
        venue:{
          anm: null,
          animationData: require('../../assets/animation/运行中实例.json')
        },
        information: {
          anm: null,
          animationData: require('../../assets/animation/储存空间.json')
        },
        events: {
          anm: null,
          animationData: require('../../assets/animation/储存空间.json')
        },
        activism: {
          anm: null,
          animationData: require('../../assets/animation/储存空间.json')
        },
        integral: {
          anm: null,
          animationData: require('../../assets/animation/运行中实例.json')

          },
        wish: {
          anm: null,
          animationData: require('../../assets/animation/队列中.json')
        },


      },

      overview: {
        neighbour:{
          月发布: {
            value: 11,
            unit: '条',
            mapping: 'month',
            event: 'asMinutes'
          },
          周发布: {
            value: 3,
            unit: '条',
            mapping: 'week',
            event: 'asMinutes'
          },
          日发布: {
            value: 0,
            unit: '条',
            mapping: 'day',
            event: 'asMinutes'
          }
        },
        community:{
          月发布: {
            value: 3,
            unit: '条',
            mapping: 'month',
            event: 'asMinutes'
          },
          周发布: {
            value: 1,
            unit: '条',
            mapping: 'week',
            event: 'asMinutes'
          },
          日发布: {
            value: 0,
            unit: '条',
            mapping: 'day',
            event: 'asMinutes'
          }
        },
        association:{
          月发布: {
            value: 21,
            unit: '条',
            mapping: 'month',
            event: 'asMinutes'
          },
          周发布: {
            value: 6,
            unit: '条',
            mapping: 'week',
            event: 'asMinutes'
          },
          日发布: {
            value: 2,
            unit: '条',
            mapping: 'day',
            event: 'asMinutes'
          }
        },
        score:{
          月兑换: {
            value: 8,
            unit: '个',
            mapping: 'month',
            event: 'asMinutes'
          },
          周兑换: {
            value: 2,
            unit: '个',
            mapping: 'week',
            event: 'asMinutes'
          },
          日兑换: {
            value: 0,
            unit: '个',
            mapping: 'day',
            event: 'asMinutes'
          }
        },
        claim:{
          月认领: {
            value: 27,
            unit: '起',
            mapping: 'month',
            event: 'asMinutes'
          },
          周认领: {
            value: 0,
            unit: '起',
            mapping: 'week',
            event: 'asMinutes'
          },
          日认领: {
            value: 0,
            unit: '起',
            mapping: 'day',
            event: 'asMinutes'
          }
        },
        time: {
          月处理: {
            value: 5,
            unit: '起',
            mapping: 'month',
            event: 'asMinutes'
          },
          周处理: {
            value: 0,
            unit: '起',
            mapping: 'week',
            event: 'asMinutes'
          },
          日处理: {
            value: 0,
            unit: '起',
            mapping: 'day',
            event: 'asMinutes'
          }
        },
        gym:{
          月预定: {
            value: 40,
            unit: '起',
            mapping: 'month',
            event: 'asMinutes'
          },
          周预定: {
            value: 10,
            unit: '起',
            mapping: 'week',
            event: 'asMinutes'
          },
          日预定: {
            value: 2,
            unit: '起',
            mapping: 'day',
            event: 'asMinutes'
          }
        }


      },

      exampleList: [],

      pieData:{
        data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
      },

      // 用户统计
      visit:{
        xdata:[],
        xTips: ['游客数据', '注册数据', '实名用户', '总用户'],
        data: [
                {
                  name: '游客数据',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: '注册数据',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: '实名用户',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: '总用户',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
            ]
      },

      // 智能垃圾站  '昨天收集户数', '参与率',"餐厨垃圾公斤","其他垃圾公斤"
      large:{
        xdata:[],
        xTips: ['昨天收集户数', '参与率',"餐厨垃圾公斤","其他垃圾公斤"],
        data: [
                {
                  name: '昨天收集户数',
                  type: 'line',
                  stack: 'Total',
                  data: [42, 36, 51, 62, 18, 88, 102]
                },
                {
                  name: '参与率',
                  type: 'line',
                  stack: 'Total',
                  data: [12, 6, 11, 4, 10, 9, 10]
                },
                {
                  name: '餐厨垃圾公斤',
                  type: 'line',
                  stack: 'Total',
                  data: [40, 12, 7, 14, 29, 20, 14]
                },
                {
                  name: '其他垃圾公斤',
                  type: 'line',
                  stack: 'Total',
                  data: [22, 18, 11, 34, 29, 33, 31]
                },
            ]
      },

      // 随手拍工单
      phoneDate:{
        xdata:[],
        xTips: [ '随手拍新增工单','随手拍日活跃'],
        data: [
                {
                  name: '随手拍新增工单',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },
                {
                  name: '随手拍日活跃',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },
            ]
      },

      // 报事报修工单
      repairDate:{
        xdata:[],
        xTips: ['报事报修新增工单', '报事报修日活跃'],
        data: [
                {
                  name: '报事报修新增工单',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },
                {
                  name: '报事报修日活跃',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },

            ]
      },

      // 投诉建议工单
      adviceDate:{
        xdata:[],
        xTips: [ '投诉建议新增工单', '投诉建议日活跃'],
        data: [
                {
                  name: '投诉建议新增工单',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },
                {
                  name: '投诉建议日活跃',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },
            ]
      },

      // 社区活动
      actData:{
        xdata:[],
        xTips:["活动总数","总参与人数"],
        data: [
                {
                  name: '活动总数',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data: []
                },
                {
                  name: '总参与人数',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                    emphasis: {
                      focus: 'series'
                    },
                  data: []
                },

            ]
      },

      // 积分中心
      scoreDate:{
        xdata:[],
        xTips:["获得积分人数","总产生积分","已消耗积分"],
        data: [
                {
                  name: '获得积分人数',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data: []
                },
                {
                  name: '总产生积分',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                    emphasis: {
                      focus: 'series'
                    },
                  data: []
                },
                {
                  name: '已消耗积分',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                    emphasis: {
                      focus: 'series'
                    },
                  data: []
                },
            ]
      },

      // 达人中心
      talentDate:{
        xdata:[],
        xTips:["达人总数","达人资讯"],
        data: [
                {
                  name: '达人总数',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data: []
                },
                {
                  name: '达人资讯',
                  type: 'line',
                  stack: 'Total',
                  areaStyle: {},
                    emphasis: {
                      focus: 'series'
                    },
                  data: []
                },
            ]
      },

      // 日活跃数量
      dayCountDate:{
        xdata:[],
        xTips: [ '日活跃数'],
        data: [
                {
                  name: '日活跃数',
                  type: 'line',
                  stack: 'Total',
                  data: []
                },
            ]
      },

    }
  },

  computed: {
    ...mapGetters(["userInfo"]),
  },

  created:function() {
    let that=this
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    let p1 = API.getPersonList(7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p2 = API.getActivityDate(7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p3 =  API.getScoreDate(7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p4 = API.getTalentDate(7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p5 = API.getOrderDetail(5,7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p6 = API.getOrderDetail(6,7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p7 = API.getOrderDetail(7,7)
              .then(({ data }) => data)
              .catch((err) => [])

    let p8 = API.getCount("",7)
              .then(({ data }) => data)
              .catch((err) => [])

    Promise.all([p1, p2, p3,p4, p5,p6,p7,p8]).then(
    ([Person, Activity, Score, Talent,  phone,repair,advice,count]) => {

      that.judgeTime()
      let date=Person.real_data.map(item=>{
          return item.date
        })

      that.visit.xdata=date
      that.actData.xdata=date
      that.scoreDate.xdata=date
      that.talentDate.xdata=date
      that.phoneDate.xdata=date
      that.repairDate.xdata=date
      that.adviceDate.xdata=date
      that.dayCountDate.xdata=date
      that.large.xdata=date

      // 人员
      that.visit.data[0].data=Person.tourist_data.map(item=>{
        return item.count
      })

      that.visit.data[1].data=Person.register_data.map(item=>{
        return item.count
      })

      that.visit.data[2].data=Person.real_data.map(item=>{
        return item.count
      })

      that.visit.data[3].data=Person.total_data.map(item=>{
        return item.count
      })

      // 活动


      that.actData.data[0].data=Activity.total_data.map(item=>{
        return item.count
      })

      that.actData.data[1].data=Activity.total_data.map(item=>{
        return item.sign_up_count
      })

      that.activityTotal=Activity.total_num


      // 积分
      that.scoreDate.data[0].data=Score.trends.map(item=>{
        return item.count
      })

      that.scoreDate.data[1].data=Score.trends.map(item=>{
        return item.generation
      })

      that.scoreDate.data[2].data=Score.trends.map(item=>{
        return item.consumption
      })

      // 达人
      that.talentDate.data[0].data=Talent.total_data.map(item=>{
        return item.talent_count
      })

      that.talentDate.data[1].data=Talent.total_data.map(item=>{
        return item.news_count
      })

      // 工单
      that.phoneDate.data[0].data=phone.map(item=>{
        return item.count
      })

      that.phoneDate.data[1].data=phone.map(item=>{
        return item.view_mum
      })

      that.total1=phone[7].total_num


      that.repairDate.data[0].data=repair.map(item=>{
        return item.count
      })

      that.repairDate.data[1].data=repair.map(item=>{
        return item.view_mum
      })

      that.total2=repair[7].total_num

      that.adviceDate.data[0].data=advice.map(item=>{
        return item.count
      })

      that.adviceDate.data[1].data=advice.map(item=>{
        return item.view_mum
      })

      that.total3=advice[7].total_num

      // 活跃数
      that.dayCountDate.data[0].data=count.apply_log_date.map(item=>{
        return item.count
      })

      count.apply_log_date.map(function(item){
        that.weeklyAve+=item.count
      })

      that.weeklyAve=Math.floor(that.weeklyAve/7)

    }).catch().finally(()=>{
        loading.close();
    })

  },

  mounted() {
    // 注册 svg动画
    for (const [key, { animationData }] of Object.entries(this.animation)) {
      this.animation[key].anm = lottie.loadAnimation({
        container: this.$refs[key],
        renderer: 'svg',
        loop: true,
        autoplay: false,
        animationData
      })
    }
  },

  methods: {

    // 获取人员信息
    getPersonList(days){
      API.getPersonList(days)
      .then(({data}) => {
        this.visit.xdata=data.real_data.map(item=>{
          return item.date
        })

        this.visit.data[0].data=data.tourist_data.map(item=>{
          return item.count
        })

        this.visit.data[1].data=data.register_data.map(item=>{
          return item.count
        })

        this.visit.data[2].data=data.real_data.map(item=>{
          return item.count
        })

        this.visit.data[3].data=data.total_data.map(item=>{
          return item.count
        })


      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 获取活动数据
    getActData(days){
      API.getActivityDate(days)
      .then(({data}) => {

        this.actData.xdata=data.total_data.map(item=>{
          return item.date
        })

        this.actData.data[0].data=data.total_data.map(item=>{
          return item.count
        })

        this.actData.data[1].data=data.total_data.map(item=>{
          return item.sign_up_count
        })

      }).catch((err) => {
      }).finally(() =>{
      })

    },

    // 获取积分数据
    getScoreDate(days){
      API.getScoreDate(days)
      .then(({data}) => {

        this.scoreDate.xdata=data.trends.map(item=>{
          return item.date
        })

        this.scoreDate.data[0].data=data.trends.map(item=>{
          return item.count
        })

        this.scoreDate.data[1].data=data.trends.map(item=>{
          return item.generation
        })

        this.scoreDate.data[2].data=data.trends.map(item=>{
          return item.consumption
        })

      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 获取达人数据
    getTalentsDate(days){
      API.getTalentDate(days)
      .then(({data}) => {
        this.talentDate.xdata=data.total_data.map(item=>{
          return item.date
        })

        this.talentDate.data[0].data=data.total_data.map(item=>{
          return item.talent_count
        })

        this.talentDate.data[1].data=data.total_data.map(item=>{
          return item.news_count
        })
      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 获取随手拍数量
    getPhoneOrdersDate(days){
      API.getOrderDetail(5,days)
      .then(({data}) => {

        this.phoneDate.xdata=data.map(item=>{
          return item.date
        })

        this.phoneDate.data[0].data=data.map(item=>{
          return item.count
        })

        this.phoneDate.data[1].data=data.map(item=>{
          return item.view_mum
        })
        console.log(this.phoneDate)
      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 获取保修数量
    getRepairOrdersDate(days){
      API.getOrderDetail(6,days)
      .then(({data}) => {

        this.repairDate.xdata=data.map(item=>{
          return item.date
        })

        this.repairDate.data[0].data=data.map(item=>{
          return item.count
        })

        this.repairDate.data[1].data=data.map(item=>{
          return item.view_mum
        })

      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 获取投诉数量
    getAdviceOrdersDate(days){
      API.getOrderDetail(7,days)
      .then(({data}) => {

        this.adviceDate.xdata=data.map(item=>{
          return item.date
        })

        this.adviceDate.data[0].data=data.map(item=>{
          return item.count
        })

        this.adviceDate.data[1].data=data.map(item=>{
          return item.view_mum
        })

      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 获取日活数据
    getDayCountDate(days){
      API.getCount("",days)
      .then(({data}) => {
        this.dayCountDate.xdata=data.apply_log_date.map(item=>{
          return item.date
        })

        this.dayCountDate.data[0].data=data.apply_log_date.map(item=>{
          return item.count
        })
        this.dayCountDate.data[1].data=data.apply_log_date.map(item=>{
          return item.count
        })
      }).catch((err) => {
      }).finally(() =>{
      })
    },

    // 判断时间
    judgeTime(){
      let that=this
      let hour=dayjs().get('hour')
      if(hour >= 6 && hour < 8){
        that.timeStatus='早上好'
      }else if(hour >= 8 && hour < 11){
        that.timeStatus='上午好'
      }else if(hour >= 11 && hour < 13){
        that.timeStatus='中午好'
      }else if(hour >= 13 && hour < 18){
        that.timeStatus='下午好'
      }else{
        that.timeStatus='晚上好'
      }
    },

    // 切换状态(用户统计)
    changeUserStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getPersonList(7)
      }else{
        that.getPersonList(30)
      }
    },

    // 切换状态（社区活动）
    changeActStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getActData(7)
      }else{
        that.getActData(30)
      }
    },

    // 切换状态（积分中心）
    changeScoreStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getScoreDate(7)
      }else{
        that.getScoreDate(30)
      }
    },

    // 切换状态（社群达人）
    changeTalentStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getTalentsDate(7)
      }else{
        that.getTalentsDate(30)
      }
    },

    // 切换随手拍状态(社区事件)
    changePhoneStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getPhoneOrdersDate(7)
      }else{
        that.getPhoneOrdersDate(30)
      }
    },

    // 切换保修状态(社区事件)
    changeRepairStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getRepairOrdersDate(7)
      }else{
        that.getRepairOrdersDate(30)
      }
    },

    // 切换投诉建议状态(社区事件)
    changeAdviceStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getAdviceOrdersDate(7)
      }else{
        that.getAdviceOrdersDate(30)
      }
    },

    // 切换日活状态
    changeDayCountStatus(e){
      let that=this
      let status=e
      if(status==1){
        that.getDayCountDate(7)
      }else{
        that.getDayCountDate(30)
      }
    },

    enter(name) {
      this.animation[name].anm.play()
    },

    leave(name) {
      this.animation[name].anm.pause()
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-header{
    padding:30px 20px;
    background-color:#fff;
    height:auto;
  }
  .el-main{
    margin-top: 30px;
    background-color:#fff;
  }
}

.userInfo{
  display: flex;
  align-items: center;
  .userName{
    display: flex;
    flex-direction: column;
    margin-left:8px;
    .welcome{
      font-size:22px;
      font-weight: 500;
      margin-bottom: 4px;
    }
    .data{
      font-size:16px;
      margin-top: 6px;
      color:rgba(3,10,26,0.5);
    }
  }
}

.dashboard-container {
  min-height: calc(100vh - 80px);
  padding: 30px;
  display: flex;
  flex-direction: column;
  .page_title {
    font-weight: 600;
    font-size: 24px;
    padding-bottom: 16px;
  }
  .model_group {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
      content: "";
      width: 509px;
    }
    &.once {
      align-items: center;
      justify-content: center;
      &::after {
        display: none;
      }
    }
  }
}

// gif
.overview_wrap {
  flex: none;
  padding-bottom: 4px;
  .overview_item {
    margin: auto;
    margin-bottom: 28px;
    margin-right: 28px;
    max-width: 500px;
    height: 128px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 4px 8px 12px rgba(0, 24, 119, 0.02);
    padding: 16px 32px 16px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
    transition: border-color 1s;
    &:hover {
      border-color: #005dd6;
    }
  }
  .overview_desc {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .cartoon {
    flex: 1;
    min-height: calc(100% - 33px);
  }
  .plate_wrap {
    display: flex;
    align-items: center;
  }
  .plate_icon {
    // width: 24px;
    // height: 24px;
    font-size: 24px;
    margin-right: 8px;
    color: #005dd6;
  }
  .desc {
    font-size: 10px;
  }
  .big_size {
    color:#005dd6;
    font-size: 56px;
    padding-right: 2px;
  }

  .list_item {
    width: 136px;
    height: 32px;
    border-bottom: 1px solid #b1cdf3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
  }
  .num {
    font-size: 24px;
    color: #005dd6;
    padding-right: 2px;
  }
}

// echart图表
.orderInfos{
  display: flex;
  align-items: center;
  justify-content: space-between;

  .orderInfo{
    font-size:28px;
    color:#73C0DE;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .orderTitle{
      font-size:26px;
      font-weight: 500;
      color:rgba(54,54,54,1);
      margin-top:20px;
      margin-bottom: 20px;
    }

    .orderStatus{
      display: flex;
      flex-direction: column;
      .el-radio-group{
        display: flex;
        flex-direction: row;
      }
    }

  }
}
.el-col-12{
  margin-bottom: 30px;
}



</style>
